<template>
  <!-- 在Vue.js中，v-html指令用于将变量中的 HTML 代码插入到元素中，实现动态渲染。 -->
  <p v-html="data"></p>
</template>

<script>
// 引入marked库
import {marked} from "marked";

export default {
  // 提供外部属性用来设置内容
  props: ["content"],
  computed: {
    // content变化就会引起上面的v-html的变化
    data() {
      // 计算属性，将外部设置的文章markdown内容转换成HTML
      return marked(this.content);
    },
  },
};
</script>